<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="referrer" content="no-referrer" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>{{index_title}}</title>
    <!-- 导入Axios组件 -->
    <script src="{{url_for('static',filename='axios.min.js')}}"></script>
    <!-- 导入Echarts组件 -->
    <script src="{{url_for('static',filename='echarts.min.js')}}"></script>
    <!-- bootstrap组件 -->
    <script src="{{url_for('static',filename='jquery.min.js')}}"></script>
    <!-- 导入bootstrap组件 -->
    <script src="{{url_for('static',filename='bootstrap.min.js')}}"></script>
    <!-- 导入bootstrap样式表 -->
    <link rel="stylesheet" href="{{url_for('static',filename='bootstrap.min.css')}}">

    <style>
        /* @font-face {
            font-family: 'FontName';
            src: url("{{url_for('static',filename='ys.ttf')}}");
        } */

        @font-face {
            font-family: 'FontName';
            src: url("{{url_for('static',filename='tencent.woff2')}}") format('woff2'),
            url("{{url_for('static',filename='tencent.woff')}}") format('woff');
            font-weight: light;
            font-style: normal;
            font-display: swap;
        }

        body {
            font-family: 'FontName';
            background-image: url("{{url_for('static',filename='water2.jpg')}}");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            /* 设置主轴为垂直方向，方便后续垂直居中布局 */
            justify-content: center;
            align-items: center;
            color: white;
            /* min-height: 100vh; */
            /* 确保页面至少占满视口高度 */
        }

        .elem {
            width: 90vw;
            /* 使用视口宽度的相对单位，占90%的视口宽度，可根据实际调整 */
            margin: 1vh 0;
            /* 上下边距使用视口高度相对单位，这里设置上下边距各占视口高度的1%，左右自动居中 */
            box-sizing: border-box;
            /* 确保元素的宽度包含内边距和边框，避免布局问题 */
            font-weight: lighter;
            text-shadow: 0 0 4px black;
        }

        /* 半透明圆角矩形白色框的样式设置，同时添加毛玻璃效果相关样式(不要毛玻璃力，树莓派性能也太弱了，半透明遮罩得了) */
        .box {
            width: 95vw;
            height: 85vh;
            margin: -2vh 0 0 0;
            /* 高度自适应内容，避免固定高度导致在不同屏幕显示异常 */
            background-color: rgba(0, 0, 0, 0.632);
            border-radius: 2vw;
            /* 圆角半径使用视口宽度相对单位，看起来更协调 */
            /* backdrop-filter: blur(20px); */
            /* box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.292); */
            /* display: flex; */
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            padding: 20px;
            /* 使用相对字体大小单位，基于根元素字体大小，方便整体缩放 */
            /* flex-direction: column; */
            color: #333;
        }

        .charts {
            width: 95vw;
            /* 占父元素宽度的80%，相对父容器宽度来设置，适应不同屏幕尺寸 */
            height: 33vh;

            margin: 0 0 0 -2vw;
            /* display: flex; */
            /* 高度自适应图表内容 */
        }

        .chartsfollow {
            margin: -14vh 0 0 -2vw;
            width: 95vw;
            /* 占父元素宽度的80%，相对父容器宽度来设置，适应不同屏幕尺寸 */
            height: 33vh;
            /* display: flex; */
            /* 高度自适应图表内容 */
        }


        .need_center {
            text-align: center;
            font-size: 2rem;
            /* 使用相对字体大小单位 */
            width: 100%;
            /* 占满父元素宽度 */
        }

        .small_size {
            text-align: center;
            font-size: 1rem;
            /* 使用相对字体大小单位 */
            width: 100%;
            /* 占满父元素宽度 */
        }

        .button {
            margin: 0.5vh 0.2vw;
            /* 边距使用相对单位 */
            opacity: 0.8;
            font-size: 1.2rem;
            /* 使用相对字体大小单位 */
        }

        .title {
            font-size: 3.5rem;
            /* margin: 1rem 1rem; */
        }

        .alerts {
            width: 30vw;
            min-width: 250px;
            position: fixed;
            left: 0px;
            top: 10px;
            text-align: left;
            font-size: 20px;
        }
    </style>

</head>

<body>
    <div class="" style="height:100vh">
        <div class="need_center title elem">{{index_title}}</div>
        <div class="box">
            <!-- <div id="chart_0" class="charts"></div> -->
            <div id="chart_bar_0" class="charts"></div>
            <div id="chart_bar_1" class="chartsfollow"></div>
            <div id="chart_bar_2" class="chartsfollow"></div>
            <div id="chart_bar_3" class="chartsfollow"></div>
            <!-- <br /> -->
            <!-- <div class="buttons">
                <button type="button" class="btn btn-primary" id="toggle1">污水缸水泵</button>
                <button type="button" class="btn btn-primary" id="toggle2">净水缸水泵</button>
                <button type="button" class="btn btn-secondary" onclick="location.reload()" id="toggle3">刷新页面</button>
            </div> -->
        </div>
        <!-- <div class="need_center small_size elem">Version:{{version}}<br />Developed by Creeper666</div> -->
    </div>
    <div id="AlertPlaceholder" class="alerts"></div>
    <script type="text/javascript">
        // 初始化echarts图表实例
        // var chart0 = echarts.init(document.getElementById('chart_0'));
        var chart_bar_0 = echarts.init(document.getElementById('chart_bar_0'));
        var chart_bar_1 = echarts.init(document.getElementById('chart_bar_1'));
        var chart_bar_2 = echarts.init(document.getElementById('chart_bar_2'));
        var chart_bar_3 = echarts.init(document.getElementById('chart_bar_3'));

        // function fetchChart0Data() {
        //     axios.get('/get_chart0')
        //         .then(response => {
        //             const data = response.data;
        //             chart0.setOption({
        //                 color: ["#eb469c"],
        //                 title: {
        //                     text: '污水区PH值(测试)',
        //                     textStyle: {
        //                         color: 'white',
        //                         fontSize: 30,
        //                         fontFamily: 'FontName'
        //                         // ...
        //                     }
        //                 },
        //                 tooltip: {
        //                     trigger: 'axis',
        //                     textStyle: {
        //                         color: 'black',
        //                         fontSize: 25,
        //                         fontFamily: 'FontName'
        //                         // ...
        //                     }
        //                 },
        //                 xAxis: {
        //                     type: 'category',
        //                     data: Array.from({ length: data.length }, (_, i) => i + 1),
        //                     axisLine: {
        //                         lineStyle: {
        //                             color: 'white',
        //                             width: 4
        //                         }
        //                     }
        //                 },
        //                 yAxis: {
        //                     type: 'value',
        //                     axisLine: {
        //                         lineStyle: {
        //                             color: 'white',
        //                             width: 4
        //                         }
        //                     }
        //                 },
        //                 series: [{
        //                     name: 'PH',
        //                     data: data,
        //                     type: 'line',
        //                     smooth: true, // 设置平滑曲线
        //                     animationDuration: 1000,
        //                     animationDurationUpdate: 300,
        //                     lineStyle: {
        //                         width: 4
        //                     },
        //                 }]
        //             });
        //         })
        //         .catch(error => console.error('Error fetching chart0 data:', error));
        // }


        // 定义图表的配置项初始结构



        var labelName = ' ℃';
        const option = {
            color: ["#FFC633", "#00BB09"],
            legend: {
                orient: 'horizontal',
                right: 0,
                top: 0,
                textStyle: {
                    color: '#ffffff',
                    fontSize: 30,
                    fontFamily: 'FontName'
                }
            },
            title: {
                text: '净水前后指标比较',
                textStyle: {
                    color: 'white',
                    fontSize: 35,
                    fontFamily: 'FontName'
                }
            },
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    color: 'black',
                    fontSize: 25,
                    fontFamily: 'FontName'
                }
            },

            yAxis: {
                type: 'category',
                // data: ['温度', 'PH', '浊度', 'TDS'],
                data: ['温度'],
                axisLine: {
                    lineStyle: {
                        color: 'white',
                        width: 5
                    },

                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    show: true,
                    interval: 'auto',
                    rotate: 0,
                    margin: 20,
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: 'white',
                        fontSize: 26,
                        fontFamily: 'FontName'
                    }
                },
            },
            xAxis: {
                type: 'value',
                label: {
                    show: true,
                    textStyle: {
                        color: 'blue',
                        fontSize: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'white'
                    },

                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    show: false,
                    interval: 'auto',
                    rotate: 0,
                    margin: 20,
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: 'white',
                        fontSize: 25,
                        fontFamily: 'FontName'
                    }
                },
            },
            series: [
                {
                    name: '污水',
                    type: 'bar',
                    data: [],
                    label: {
                        show: true,  // 显示标签
                        position: 'insideRight',  // 标签位置在柱子顶部
                        fontFamily: 'FontName',  // 设置字体为 Arial
                        fontSize: 25,  // 设置字号为 16px
                        color: 'white',  // 设置文字颜色为蓝色
                        textBorderColor: 'black',
                        textBorderWidth: 4,
                        formatter: function (params) {
                            return params.value + labelName;
                        }
                    }
                },
                {
                    name: '净水',
                    type: 'bar',
                    data: [],
                    label: {
                        show: true,  // 显示标签
                        position: 'insideRight',  // 标签位置在柱子顶部
                        fontFamily: 'FontName',  // 设置字体为 Arial
                        fontSize: 25,  // 设置字号为 16px
                        color: 'white',  // 设置文字颜色为蓝色
                        textBorderColor: 'black',
                        textBorderWidth: 4,
                        formatter: function (params) {
                            return params.value + labelName;
                        }
                    }
                }

            ]
        };

        const option2 = {
            color: ["#FFC633", "#00BB09"],
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    color: 'black',
                    fontSize: 25,
                    fontFamily: 'FontName'
                }
            },

            yAxis: {
                type: 'category',
                // data: ['温度', 'PH', '浊度', 'TDS'],
                data: ['PH'],
                axisLine: {
                    lineStyle: {
                        color: 'white',
                        width: 5
                    },

                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    show: true,
                    interval: 'auto',
                    rotate: 0,
                    margin: 20,
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: 'white',
                        fontSize: 26,
                        fontFamily: 'FontName'
                    }
                },
            },
            xAxis: {
                type: 'value',
                label: {
                    show: true,
                    textStyle: {
                        color: 'blue',
                        fontSize: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'white'
                    },

                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    show: false,
                    interval: 'auto',
                    rotate: 0,
                    margin: 20,
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: 'white',
                        fontSize: 25,
                        fontFamily: 'FontName'
                    }
                },
            },
            series: [
                {
                    name: '污水',
                    type: 'bar',
                    data: [],
                    label: {
                        show: true,  // 显示标签
                        position: 'insideRight',  // 标签位置在柱子顶部
                        fontFamily: 'FontName',  // 设置字体为 Arial
                        fontSize: 25,  // 设置字号为 16px
                        color: 'white',  // 设置文字颜色为蓝色
                        textBorderColor: 'black',
                        textBorderWidth: 4,
                        formatter: function (params) {
                            return params.value + labelName;
                        }
                    }
                },
                {
                    name: '净水',
                    type: 'bar',
                    data: [],
                    label: {
                        show: true,  // 显示标签
                        position: 'insideRight',  // 标签位置在內右
                        fontFamily: 'FontName',  // 设置字体为 Arial
                        fontSize: 25,  // 设置字号为 16px
                        color: 'white',  // 设置文字颜色为蓝色
                        textBorderColor: 'black',
                        textBorderWidth: 4,
                        formatter: function (params) {
                            return params.value + labelName;
                        }
                    }
                }

            ]
        };

        function fetchChartBarData() {
            axios.get('/get_chartbar')
                .then(response => {
                    const data = response.data;
                    // 更新x轴分类数据（这里简单假设只有两个数据对应的分类）
                    // option.xAxis.data = ['样本1', '样本2'];
                    // 更新污水数据
                    option.series[0].data = data.dirty.slice(0, 1);
                    // 更新净水数据
                    option.series[1].data = data.clear.slice(0, 1);
                    // 使用更新后的配置项渲染图表
                    labelName = ' ℃';
                    chart_bar_0.setOption(option);

                    // option2.title.show = false;
                    // option2.legend.show = false;
                    // option2.splice(6,1);
                    option2.yAxis.data[0] = 'PH';
                    option2.series[0].data = data.dirty.slice(1, 2);
                    // 更新净水数据
                    option2.series[1].data = data.clear.slice(1, 2);
                    labelName = '';
                    chart_bar_1.setOption(option2);
                    option2.yAxis.data[0] = '浊度';
                    option2.series[0].data = data.dirty.slice(2, 3);
                    // 更新净水数据
                    option2.series[1].data = data.clear.slice(2, 3);
                    labelName = ' NTU';
                    chart_bar_2.setOption(option2);
                    option2.yAxis.data[0] = 'TDS';
                    option2.series[0].data = data.dirty.slice(3, 4);
                    // 更新净水数据
                    option2.series[1].data = data.clear.slice(3, 4);
                    labelName = ' PPM';
                    chart_bar_3.setOption(option2);

                })
                .catch(error => {
                    console.log('请求出错：', error);
                });
        }


        // 初始化图表
        // fetchChart0Data();
        fetchChartBarData();
        // 设置定时器，每隔设置时间发送请求
        setInterval(fetchChartBarData, '{{ refresh_rate }}');
        // setInterval(fetchChart0Data, '{{ refresh_rate }}');
        // setInterval(fetchChart1Data, {{ refresh_rate }});

        //监测窗口大小变化事件，重新加载图表大小以符合窗口
        window.addEventListener('resize', function () {
            // 要重置2轮，避免出现来不及切换导致的显示问题
            // chart0.resize();
            chart_bar_0.resize();
            chart_bar_1.resize();
            chart_bar_2.resize();
            chart_bar_3.resize();
            // chart0.resize();
            chart_bar_0.resize();
            chart_bar_1.resize();
            chart_bar_2.resize();
            chart_bar_3.resize();
        });
    </script>

    <!-- 按钮监听脚本 -->
    <script>
        const alertPlaceholder = document.getElementById('AlertPlaceholder')
        const alert = (message, type) => {
            const wrapper = document.createElement('div');
            let timestamp = Date.now();
            wrapper.innerHTML = [
                `<div id="tab-${timestamp}" class="alert alert-${type} alert-dismissible fade show" role="alert">`,
                `   <div>${message}</div>`,
                '</div>'
            ].join('');
            alertPlaceholder.append(wrapper);
            setTimeout(function () {
                $('#tab-' + timestamp).alert('close');
            }, 2000);
        }

        $(document).ready(function () {
            // 监听Toggle 1按钮的点击事件
            $('#toggle1').click(function () {
                var isChecked = $(this).hasClass('active');
                var message = isChecked ? 'Toggle 1 is now ON' : '污水缸水泵已关闭';
                alert(message, 'success')
            });

            // 监听Toggle 2按钮的点击事件
            $('#toggle2').click(function () {
                var isChecked = $(this).hasClass('active');
                var message = isChecked ? 'Toggle 2 is now ON' : '净水缸水泵已关闭';
                alert(message, 'success')
            });

            // function showNotification(text) {

            //     // 更新通知文本内容
            //     $('#notification-text').text(text);
            //     // 显示通知
            //     $('#notification').removeClass('d-none');
            //     // 设置定时器，5秒后隐藏通知

            // }
        });




    </script>
</body>

</html>